<template>
  <CardHead title="销售表现均值" :filters="filters" @on-select="onSelect">
    <div class="w-full rounded-lg px-3">
      <CardLoading v-if="loading" />
      <div v-else class="w-full bg-white rounded-lg py-3">
        <RadarChart
          v-if="currentFilter.value == ReportDataType.ABILITY"
          :data="dataList"
        />
        <ScoreProgress v-else :progressItems="progressItems" />
      </div>
    </div>
  </CardHead>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, Ref, watch } from "vue";
import CardHead from "@/views/myXmate/myTeam/components/cardHead.vue";
import RadarChart from "@/components/charts/radarChart.vue";
import CardLoading from "@/views/myXmate/myTeam/components/cardLoading.vue";
import ScoreProgress from "@/views/myXmate/components/scoreProgress.vue";
import { useMyXmateStore } from "@/store";
import { FilterOptions } from "@/views/myXmate/myTeam/components/cardHead";
import { getDeptSalesDimensionsScoreAPI, ReportDataType } from "@/services/myXmate";
import reportOptions from "../reportOptions.json";
import { optimizeDecimal } from "@/utils/num";
import { ParameterDateType, formatCompletionTime } from "@/utils/timeTool";

// 销售表现
const currentFilter: Ref<FilterOptions> = ref(reportOptions[0]);
const filters = [
  {
    text: currentFilter.value?.text,
    type: currentFilter.value?.value,
    options: reportOptions,
  },
];
// 初始化数据
const store = useMyXmateStore();
const loading = ref(false);
const dataList = ref([]);
const progressItems = ref({
  averageSource: 0,
  unit: "%",
  list: [],
});

const currentDeptId = computed(() => store.noticeBoardPublicParam.currentDept?.id);
const reportType = computed(() => store.noticeBoardPublicParam.reportType);
const startTime = computed(() => store.noticeBoardPublicParam.startDate);
const endTime = computed(() => store.noticeBoardPublicParam.endDate);

const makeParam = () => {
  let param = {
    orgId: store.orgId,
    deptId: currentDeptId.value,
    dataType: currentFilter.value?.value,
    params: {
      reportType: reportType.value,
      startTime: formatCompletionTime(startTime.value, ParameterDateType.START_DATE),
      endTime: formatCompletionTime(endTime.value, ParameterDateType.ENE_DATE),
    },
  };
  console.log("makeParam: ", param);
  return param;
};

// 选中替换表类型
const onSelect = (filterItem) => {
  const { options } = filterItem;
  currentFilter.value = options?.find(
    (temp: FilterOptions) => temp.value === filterItem.value
  );
  init();
};

// 处理表格数据
const initRadarChart = (list) => {
  dataList.value = list.map((x) => ({
    name: x.assessmentName,
    value: optimizeDecimal(x.score),
  }));
};
const initProgressItems = (list) => {
  progressItems.value = {
    averageSource: 50,
    unit: "%",
    list: list.map((item) => {
      return {
        label: item.assessmentName,
        value: item.score ? Number(item.score) : 0,
        data: item,
      };
    }),
  };
};
const init = async () => {
  loading.value = true;
  if (currentFilter.value.value == ReportDataType.ABILITY) {
    const data = await getDeptSalesDimensionsScoreAPI(makeParam());
    initRadarChart(data.datas);
    loading.value = false;
  } else {
    const data = await getDeptSalesDimensionsScoreAPI(makeParam());
    initProgressItems(data.datas);
    loading.value = false;
  }
};
watch(
  () => [currentDeptId.value, reportType.value],
  () => {
    init();
  }
);

onMounted(() => {
  init();
});
</script>

<style scoped></style>
